<template>
  <div v-if="content" class="container-width">
    <div class="custom-slider bgc-white pad-20 mar-b-10 mar-t-30">
      <div class="flex flex-baseline mar-t-2">
        <span class="font-32 font-color-3 font-w pad-r-20">{{ content.propMap.mainTitle }}</span>
        <div class="font-16 font-color-6 flex tab-box">
          <span class="mar-r-15">{{ content.propMap.subTitle }}</span>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="flex mar-t-16">
        <div class="mar-r--10 mar-b-16 s-img flex flex-wrap">
          <el-image v-for="(itemPic, indexPic) in content.goodsList" :key="indexPic" :src="itemPic.imgUrl" lazy
            @click="goodsEls(itemPic)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    jumpPage
  } from '@/utils/jumpPageUtils'
  export default defineComponent({
    name: 'CustomSliderFirst',
    props: {
      content: {
        type: Object,
        default: () => ({})
        // type: Array,
        // default: () => []
      }
    },
    setup() {
      const router = useRouter()
      onMounted(() => {})
      const goodsEls = (item: any) => {
        jumpPage(router, 1, 1, 2001, '?goodsId=' + item.goodsId, 1)
      }
      return {
        goodsEls
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;

  .custom-slider {
    .tab-box {
      position: relative;
      top: 2px;
    }

    .s-img {
      .el-image {
        width: 264px;
        height: 368px;
        margin-right: 10px;
        cursor: pointer;
      }
    }
  }
</style>
